<template>
    <view class="bang-tabbar">
        <view class="bang-tab-bar__content" :class="{'bang-border-top': border}" :style="{ 'grid-template-columns': `repeat(${columnNum}, 1fr)` }">
            <slot/>
        </view>
        <up-safe-bottom v-if="safeAreaInsetBottom"/>
    </view>
</template>

<script setup>
const props = defineProps({
    border: {type: Boolean, default: true},
    safeAreaInsetBottom: {type: Boolean, default: true},
    columnNum:{type:Number,default:3}
})
</script>

<style scoped>
.bang-tabbar {
    background-color: #FFFFFF;
}

.bang-tabbar .bang-tab-bar__content {
    display: grid;
    box-sizing: border-box;
    height: 108rpx;
    align-items: center;
}
</style>
